{% extends "app/base_site.html" %}

{% block title %} 无权限访问 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
<style>
    .xc_no-permission-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: calc(100vh - 120px);
        padding: 20px;
    }
    
    .xc_no-permission-card {
        background: white;
        border-radius: 8px;
        padding: 40px 50px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        text-align: center;
        max-width: 480px;
        width: 100%;
    }
    
    .xc_no-permission-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 20px;
        background: #fef3f2;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .xc_no-permission-icon i {
        font-size: 36px;
        color: #dc2626;
    }
    
    .xc_no-permission-title {
        font-size: 20px;
        font-weight: 500;
        color: #1f2937;
        margin: 0 0 12px 0;
    }
    
    .xc_no-permission-message {
        font-size: 13px;
        color: #6b7280;
        line-height: 1.6;
        margin: 0 0 8px 0;
    }
    
    .xc_no-permission-path {
        display: inline-block;
        padding: 4px 10px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        font-size: 11px;
        color: #374151;
        font-family: monospace;
        margin: 0 0 24px 0;
    }
    
    .xc_no-permission-actions {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    
    .xc_no-permission-btn {
        padding: 8px 20px;
        font-size: 13px;
        font-weight: 400;
        border-radius: 4px;
        border: 1px solid #d1d5db;
        background: white;
        color: #374151;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    
    .xc_no-permission-btn:hover {
        background: #f9fafb;
        border-color: #9ca3af;
        color: #374151;
        text-decoration: none;
    }
    
    .xc_no-permission-btn-primary {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }
    
    .xc_no-permission-btn-primary:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    }
    
    .xc_no-permission-footer {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #f3f4f6;
    }
    
    .xc_no-permission-tip {
        font-size: 11px;
        color: #9ca3af;
        line-height: 1.5;
    }
    
    .xc_no-permission-tip-highlight {
        color: #6b7280;
        font-weight: 500;
    }
</style>
{% endblock stylesheets %}

{% block content %}
<div class="right_col" role="main">
    <div class="xc_no-permission-container">
        <div class="xc_no-permission-card">
            <div class="xc_no-permission-icon">
                <i class="fa fa-ban"></i>
            </div>
            
            <h2 class="xc_no-permission-title">无权限访问</h2>
            
            <p class="xc_no-permission-message">
                抱歉，您没有访问此页面的权限
            </p>
            
            {% if request_path %}
            <div class="xc_no-permission-path">{{ request_path }}</div>
            {% endif %}
            
            <div class="xc_no-permission-actions">
                <a href="javascript:history.back()" class="xc_no-permission-btn">
                    <i class="fa fa-arrow-left"></i>
                    返回上一页
                </a>
                <a href="/" class="xc_no-permission-btn xc_no-permission-btn-primary">
                    <i class="fa fa-home"></i>
                    返回首页
                </a>
            </div>
            
            <div class="xc_no-permission-footer">
                <p class="xc_no-permission-tip">
                    如需访问此功能，请联系<span class="xc_no-permission-tip-highlight">超级管理员</span>为您分配相应权限
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock content %}
